<template>
  <view
    class="dynamic-comment-box"
    :style="{
      bottom: `${height}px`
    }"
  >
    <oto-mask :custom-style="{ background: 'transparent' }" :show="show" @click.stop="clickInputOutSide"></oto-mask>
    <view class="dynamic-comment-body">
      <view class="comment-input">
        <oto-scroll-view
          :custom-style="{
            minHeight: '70rpx',
            maxHeight: '160rpx',
            overflow: 'hidden',
            width: '579rpx',
            height: 'auto',
            zIndex: 800,
            position: 'relative',
            backgroundColor: 'rgba(255, 255, 255, 1)',
            borderRadius: '7rpx',
            border: 'rgba(217, 217, 217, 1) solid 2rpx'
          }"
          :scroll-y="true"
        >
          <template>
            <oto-textarea
              :custom-style="{
                width: 'auto',
                height: 'auto',
                fontSize: '33rpx',
                color: 'rgba(80, 80, 80, 1)',
                padding: lineCount > 1 ? '0 25rpx 0 25rpx' : '18rpx 25rpx 18rpx 25rpx'
              }"
              :show-confirm-bar="false"
              :adjust-position="false"
              :focus="show"
              :auto-blur="true"
              @keyboardheightchange="keyboardheightchange"
              @focus="focus"
              @blur="blur"
              @confirm="doConfirm"
              @input="input"
              :value="value"
              auto-height="true"
              @linechange="linechange"
              :disabled="disabled"
              :placeholder="placeholder"
            />
          </template>
        </oto-scroll-view>
      </view>
      <oto-button
        class="send-button"
        :custom-style="{
          width: '117rpx',
          height: '70rpx',
          borderRadius: '12rpx',
          fontSize: '28rpx'
        }"
        @click.stop="send"
        :disabled="buttonDisabled"
      >
        发送
      </oto-button>
    </view>
  </view>
</template>

<script>
  import OtoButton from '../common/oto-button.vue';
  // import OtoInput from '@/components/Common/oto-input.vue';
  import OtoMask from '../common/oto-mask.vue';
  import OtoScrollView from '../common/oto-scroll-view.vue';
  import OtoTextarea from '../common/oto-textarea.vue';

  export default {
    components: {
      OtoMask,
      OtoTextarea,
      OtoButton,
      OtoScrollView
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      show: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      buttonDisabled: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请写评论'
      }
    },
    data() {
      const tabBarHeight = this.getTabbrHeight();
      return {
        height: 0,
        lineCount: 1,
        tabBarHeight
      };
    },
    created() {},
    methods: {
      clickInputOutSide(e) {
        console.log(e);
        this.$emit('clickInputOutSide', e);
      },
      close() {
        this.$emit('close');
      },
      getTabbrHeight() {
        //兼容tabbar页
        const systemInfo = uni.getSystemInfoSync();
        // 状态栏的高度
        const ktxStatusHeight = systemInfo.statusBarHeight;
        // 导航栏的高度
        const navigationHeight = 44;

        // window的高度
        const ktxWindowHeight = systemInfo.windowHeight;
        // 屏幕的高度
        const ktxScreentHeight = systemInfo.screenHeight;
        // 底部tabBar的高度
        const tabBarHeight = ktxScreentHeight - ktxStatusHeight - navigationHeight - ktxWindowHeight;
        return tabBarHeight;
      },
      keyboardheightchange(e) {
        console.log('keyboardheightchange', e);
        console.log('this.tabBarHeight', this.tabBarHeight);
        const tabBarHeight = this.tabBarHeight > 0 ? this.tabBarHeight : 0;
        this.height = e.detail.height - tabBarHeight;
      },
      input(e) {
        console.log(e);
        this.$emit('input', e);
      },
      focus(e) {
        console.log('focus', e);
      },
      blur(e) {
        console.log('blur', e);
        // this.height = e.detail.height;
      },
      doConfirm() {
        // this.$emit('confirm', e);
        // this.close();
      },
      linechange(e) {
        // event.detail = {height: 0, heightRpx: 0, lineCount: 0}
        console.log('linechange', e);
        this.lineCount = e.detail.lineCount;
      },
      send(e) {
        this.$emit('send', e);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dynamic-comment-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    // margin-bottom: constant(safe-area-inset-bottom);
    // margin-bottom: env(safe-area-inset-bottom);

    .comment-input {
      margin-right: 11rpx;
    }

    .dynamic-comment-body {
      position: relative;
      z-index: 888;
      padding: 21rpx 0rpx 19rpx 22rpx;
      background-color: rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      min-height: 110rpx;
    }

    .dynamic-comment {
    }

    .send-button {
    }
  }
</style>
